import React, { memo, useEffect } from 'react';
import { useDispatch, useSelector, shallowEqual } from 'react-redux';

import { 
  getRadioRankingAction, 
  changeCurrentPageAction 
} from "../../store/actionCreators";

import ThemeHeaderNormal from "@/components/theme-header-normal";
import RankingCover from "@/components/djradio-ranking-cover";
import Pagination from "@/components/pagination";
import { RankingWrapper } from "./style";

const RadioRanking = memo(() => {
  const dispatch = useDispatch();
  const { currentId, radios, currentPage } = useSelector(state => ({
    currentId: state.getIn(["djradio", "currentId"]),
    radios: state.getIn(["djradio", "radios"]),
    currentPage: state.getIn(["djradio", "currentPage"])
  }), shallowEqual);
  const djRadios = radios.djRadios || [];
  const total = radios.count || 0;

  useEffect(() => {
    if (currentId === 0) return;
    dispatch(changeCurrentPageAction(1));
    dispatch(getRadioRankingAction(currentId));
  }, [dispatch, currentId]);

  const onPageChange = (page) => {
    dispatch(changeCurrentPageAction(page));
    dispatch(getRadioRankingAction(currentId));
  };

  return (
    <RankingWrapper>
      <ThemeHeaderNormal title="电台排行榜" />

      <div className="list">
        {
          djRadios.map(item => <RankingCover key={item.id} item={item} />)
        }
      </div>

      <Pagination
        currentPage={currentPage}
        total={total}
        pageSize={30}
        onPageChange={onPageChange}
      />
    </RankingWrapper>
  )
});

export default RadioRanking